<template>
  <a-modal
    v-model="visible"
    :title="shareType == 'poster' ? '分享职位' : '面试邀请'"
    :footer="null"
    :width="shareType == 'poster' ? 800 : 560"
    class="share"
    @cancel="$emit('update:visible', false)"
  >
    <a-spin tip="加载中" v-if="loading" class="spins" :style="{ height: shareType == 'poster' ? '670px' : '316px' }"></a-spin>
    <div class="img" v-if="shareType == 'poster'">
      <div class="imgl">
        <img class="imgl-back" :src="phoneBack" />
        <img class="imgl-poster" :src="qrCodeUrl + '?token=' + token" />
      </div>
      <div>
        <div class="imgtit">下载</div>
        <a-button @click="saveImg" style="margin-bottom: 40px">下载海报</a-button>
        <a-button @click="saveImgQrCode" style="margin-bottom: 40px" class="ml12">下载二维码</a-button>
        <div class="imgtit">其他分享方式</div>
        <a-input disabled v-model="qrCodeUrl" style="width: 302px; margin-right: 8px" />
        <a-button v-clipboard:copy="qrCodeUrl" v-clipboard:success="onCopy" v-clipboard:error="onError">复制链接</a-button>
      </div>
    </div>
    <div v-else>
      <div class="ewm">
        <img :src="qrCodeUrl + '?token=' + token" />
        <div>
          <div class="tit">通过小程序码分享到微信</div>
          <a-button @click="saveImg">下载二维码</a-button>
        </div>
      </div>
      <div class="btn">
        <a-input disabled v-model="qrCodeUrl" style="width: 302px; margin-right: 8px" />
        <a-button v-clipboard:copy="qrCodeUrl" v-clipboard:success="onCopy" v-clipboard:error="onError">复制链接</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { getToken } from "xqjr-module-auth";
import { getQRCodeByrecruitInfoIds, onPostDownload } from "./api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    shareType: {
      type: String,
      default: "ewm"
    },
    shareIdArr: {
      type: Array,
      default: () => []
    },
    qrCodeUrlV: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      phoneBack: require("@/assets/recruitment/phoneBack.png"),
      loading: true,
      token: "",
      qrCodeUrl: "",
      qrCode: ""
    };
  },
  watch: {
    visible(v) {
      this.qrCodeUrl = "";
      this.loading = true;
      this.token = getToken();
      if (v && this.shareIdArr.length > 0) {
        this.onGetQRCodeByrecruitInfoIds();
      } else {
        this.qrCodeUrl = this.qrCodeUrlV;
        this.loading = false;
      }
    }
  },
  methods: {
    onCopy(e) {
      if (e.text) {
        this.$message.success("复制成功");
      }
    },
    onError(err) {
      console.log("error log --> ", err);
    },
    async onGetQRCodeByrecruitInfoIds() {
      try {
        const { data } = await getQRCodeByrecruitInfoIds({
          sourceType: "system",
          recruitIds: this.shareIdArr
        });
        this.qrCode = data.qrCode; // 二维码
        this.qrCodeUrl = data.qrCodeUrl; // 海报
        this.loading = false;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    saveImg() {
      if (this.qrCodeUrl) {
        this.$notification.warning({ message: this.shareType === "poster" ? "正在下载海报" : "正在下载二维码" });
        this.onDownload(this.qrCodeUrl);
        // this.onDownload(this.qrCodeUrl);
      } else {
        this.$notification.error({ message: this.shareType === "poster" ? "暂无海报" : "暂无二维码" });
      }
    },
    saveImgQrCode() {
      if (this.qrCode) {
        this.$notification.warning({ message: "正在下载二维码" });
        onPostDownload(this.qrCode, "职位分享二维码");
        // this.onDownload(this.qrCodeUrl);
      } else {
        this.$notification.error({ message: "暂无二维码" });
      }
    },
    isNumber(obj) {
      return typeof obj === "number" && !isNaN(obj);
    },
    downloadIamge(imgsrc, name) {
      // 下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); // 得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    },
    async onDownload(url) {
      const n = this.shareType === "poster" ? "职位分享海报" : "面试邀请二维码";
      onPostDownload(url, n);
    }
  }
};
</script>

<style lang="scss" scoped>
.share {
  position: relative;
  overflow: hidden;
  ::v-deep .ant-modal-content {
    overflow: hidden;
  }
  .spins {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .tit {
    text-align: center;
  }
  .img {
    display: flex;
    .imgl {
      width: 270px;
      height: 572px;
      box-shadow: 0px 10px 20px 0px rgba(43, 44, 49, 0.16);
      margin-right: 32px;
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      .imgl-back {
        width: 100%;
        height: 100%;
      }
      .imgl-poster {
        position: absolute;
        top: 66px;
        left: 8px;
        width: 254px;
        height: 468px;
      }
    }
    .imgtit {
      font-size: 16px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #3c3d43;
      margin-bottom: 16px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .ewm {
    width: 400px;
    margin: 0 auto;
    display: flex;
    margin-bottom: 32px;
    img {
      width: 144px;
      height: 144px;
      margin-right: 16px;
    }
    button {
      margin-top: 18px;
    }
  }
  .btn {
    width: 400px;
    margin: 0 auto;
  }
}
</style>
